<template>
    <el-row>
        <el-col border class="records-search">
            <el-form :inline="true" :model="guestbookForm" class="demo-form-inline" size="small">

                <el-form-item label="学生">
                    <el-input v-model="guestbookForm.stu" placeholder="请输入学号或姓名" clearable style="width: 160px;" />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button type="primary" @click="onImport">导入</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    
    
    <el-table :data="tableData" border size="small" style="width: 100%" height="calc(100vh - 190px)" v-loading="loading">
            <el-table-column fixed  prop="id" label="序号"  width="120" />
            <el-table-column prop="userId" label="学号"  width="120" />
            <el-table-column prop="userName" label="姓名"  width="120" />
            <el-table-column prop="conditionDesc" label="健康状况" />
            <el-table-column prop="createUser" label="处理人员"  width="120" />
            <el-table-column prop="email" label="操作" width="100" >
                <template #default="scope">
                    <el-button size="small" type="danger" @click="onDel(scope.row)" >
                        删除
                    </el-button>
                </template>
            </el-table-column>
    </el-table>

    <div style="margin: 20px 0;"></div>

    <el-pagination
        size="small"
        background
        layout="prev, pager, next"
        :total="totalData"
        :page-size="30"
        class="mt-4"
        @change="changePage"
    />



    <el-dialog
        v-model="dialogVisible"
        title="上传学生健康状态"
        width="500"
        :before-close="handleClose"
        :close-on-click-modal = false
        :show-close = false
        :close-on-press-escape = false
    >
        <el-upload ref="uploadRef" 
            class="upload-demo" 
            action="" 
            :http-request="uploadSectionFile"
            :auto-upload="false"
            :on-remove="removeFile"
            :on-success="successFile"
            :on-error="errorFile"
            >
            <template #trigger>
            <el-button type="primary" size="small">选择文件</el-button>
            </template>
            <el-button class="ml-3" type="success" size="small" @click="submitUpload" style="margin-left: 15px;">开始上传</el-button>
            <el-button class="ml-3" type="info" size="small" @click="templateDownload" style="margin-left: 15px;">模板下载</el-button>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small" >取消</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
    import { onMounted, reactive, ref } from 'vue'
    import useSystemInitStore from '@/stores/init'
    import { ElMessage, ElNotification } from 'element-plus'
    import { upload, getListPage, deleteInfo } from '@/api/condition'

    const uploadRef = ref();


    /// 系统信息
    const systemInitStore = useSystemInitStore()

    const tableData = ref([])
    const totalData = ref(0)
    const loading = ref(true)

    const dialogVisible = ref(false)


    onMounted(() => {
        if(systemInitStore.groups && systemInitStore.groups.children) {
            loadData()
        } else {
            ElMessage.error('系统初始化数据加载失败。')
        }
    })

    const onDel = (data) => {
        deleteInfo({'id': data.id}).then(res => {
            if ( res.code == 200 ) {
                ElNotification({
                    title: '删除成功',
                    type: 'success',
                })
                loadData()
            } else {
                ElMessage.error('数据加载失败。')
            }
        })
    }

    const onSearch = () => {
        loadData()
    }

    /// 选择文件
    const onImport = () => {
        dialogVisible.value = true
        uploadRef.value.clearFiles()
        uploadRef.value.handleRemove()
    }


    /// 移除文件监听
    const removeFile = (uploadFile, uploadFiles) => {
        file.value = null
    }

    /// 自定义上传
    const uploadSectionFile = (options) => {

        if(!options.file) {
            return false
        }

        let formData = new FormData()
        formData.append('file', options.file)
        upload(formData).then(res => {
            if(res.code == 500) {
                options.onError(res)
            } else {
                options.onSuccess(res)
            }
            
        }).catch(e => {
            options.onError(e)
        });

    }

    /// 上传成功
    const successFile = (res, uploadFile, uploadFiles) => {
        if(res.code == 200) {
            loadData()
            ElNotification({
                title: '上传成功',
                type: 'success',
            })
        } else {
            ElNotification({
                title: '上传失败',
                type: 'warning',
            })
        }
    }

    /// 上传失败
    const errorFile = (error, uploadFile, uploadFiles) => {
        ElNotification({
            title: '文件解析异常，请检查上传文件',
            type: 'error',
        })
    }

    /// 开始上传
    const submitUpload = () => {
        uploadRef.value.submit()
    }

    const guestbookForm = reactive({
        page: 1,
        size: 30,
        stu: '',
    })

    const loadData = () => {
        loading.value = true
        getListPage(guestbookForm).then(res => {
            if ( res.code == 200 ) {
                tableData.value = res.data.rows
                totalData.value = res.data.total
                loading.value = false
            } else {
                ElMessage.error('数据加载失败。')
            }
        })
    }

    const changePage = (currentPage, pageSize) => {
        guestbookForm.page = currentPage
        loadData()
    }


    const templateDownload = () => {
        const fileUrl = '/condition_template.xlsx'; // 文件的URL地址
        window.open(fileUrl);
    }


</script>

<style>
    .records-search {
        height: 50px;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-border-radius-base);
        margin-bottom: 8px;
        line-height: 42px;
        padding: 0px 10px;
        .el-form-item--small {
            margin-bottom: 0px;
        }
        .el-form-item {
            margin-bottom: 0px;
        }
    }
    .registers-scrollbar {
        height: calc(100vh - 225px);
    }
</style>
